<template>
    <el-form class="withdraw-form" :model="withdrawForm">
        <!-- 提现银行名称 -->
        <el-form-item class="input-item">
            <div class="date-key">提現銀行名稱:</div>
            <div class="date-value">{{ withdrawForm.withdrawBank }}</div>
        </el-form-item>
        <!-- 提现账户名称 -->
        <el-form-item class="input-item">
            <div class="date-key">提現賬戶名稱:</div>
            <div class="date-value">{{ withdrawForm.withdrawAccount }}</div>
        </el-form-item>
        <!-- 提现银行账户号 -->
        <el-form-item class="input-item">
            <div class="date-key">提現銀行帳戶號:</div>
            <div class="date-value">{{ withdrawForm.withdrawBankAccount }}</div>
        </el-form-item>
        <!-- 提现貨幣 -->
        <el-form-item class="input-item">
            <div class="date-key">提現貨幣：</div>
            <div class="date-value">{{ withdrawForm.withdrawCurrency }}</div>
        </el-form-item>
        <!-- 提现金额 可用余额-->
        <el-form-item class="input-item">
            <div class="date-key widthFix">提現金額:</div>
            <el-input v-model="withdrawForm.withdrawMoney" size="large" placeholder="請輸入" />
            <div class="extra-info">可用餘額: {{ withdrawForm.canuseMoney }}</div>
        </el-form-item>
        <!-- 谷歌验证器 -->
        <el-form-item class="input-item">
            <div class="date-key widthFix">谷歌驗證器:</div>
            <el-input v-model="withdrawForm.googleCode" size="large" placeholder="請輸入" />
        </el-form-item>
        <!-- 提交按鈕 -->
        <el-form-item class="submit-btn-item">
            <el-button type="primary">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'


const withdrawForm = reactive({
    withdrawBank: '工商银行',
    withdrawAccount: '1222',
    withdrawBankAccount: '1234',
    withdrawCurrency: '美元',
    withdrawMoney: '',
    googleCode: '',
    canuseMoney: '123'
});
</script>

<style scoped lang="scss">
.date-key {
    color: #3D3D3D;
}

.date-value {
    color: #3D3D3D;
}
.widthFix {
    width: 90px;
    margin-right: 13px;
}
.extra-info {
    margin-left: 20px;
}

.withdraw-form {
    width: 510px;
    margin: 0 auto;

    :deep(.submit-btn-item) {
        .el-button.el-button--primary {
            width: 140px;
            height: 34px;
        }
    }

    :deep(.input-item) {
        .el-form-item__content {
            flex-wrap: nowrap;
            flex-shrink: 0;

            .el-input--large {
                width: 213px;
                .el-input__wrapper {
                    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
                    height: 34px;
                }
            }
        }
    }

}
</style>